let body=$('body');
let audio=$('audio');

class Tail{
    constructor(locationX,locationY,targetX,targetY) {
        this.locationX=locationX;
        this.locationY=locationY;
        if(targetX){
            this.targetX=targetX;
        }else this.targetX=getRandom5(this.locationX);
        if(targetY){
            this.targetY=targetY;
        }else this.targetY=getRandom5(this.locationY);
        this.createDom();
    }
    opacity=1;
    item=null;

    createDom(){
        let $item=$('<div></div>');
        $item.css({
            transition:`left ${getRandom2()+1}s linear 0s,top ${getRandom2()+1}s linear 0s,opacity 2s 0s`,
            transform: `rotate(${getRandom3(this)}deg) `,
            top:`${this.locationY}px`,
            left:`${this.locationX}px`,
            opacity:1
        })
        $item.appendTo(body);
        this.item=$item;
    }
}


function getRandom1(){
    let a=(Math.random()*200)+400;
    return a;
    
}

function getRandom2(){
    let a=Math.random()*0.1+0.2;
    return a;
}

function getRandom3(tail){
    function getTanDeg(tan) {
        var result = Math.atan(tan) / (Math.PI / 180);
        result = Math.round(result);
        return result;
    }
    let w=tail.targetX-tail.locationX;
    let h=tail.targetY-tail.locationY;
    return getTanDeg(h/w)
}

function getRandom4(){
    let a=Math.random()*1320+100;
    let b=Math.random()*320+100;
    return [a,b];
}

function getRandom5(a){
    let b=Math.random()*200+a-100;
    return b;
}

function getRandom6(){
    let list=[
        'linear-gradient(to right,rgb(138, 183, 226) 0%,rgb(102, 70, 218) 100%)',
        'linear-gradient(to right,rgb(71, 173, 68) 0%,rgb(165, 199, 182) 100%',
        'linear-gradient(to right,rgb(240, 8, 8) 0%,rgb(231, 162, 162) 100%)',
        'linear-gradient(to right,rgb(223, 104, 7) 0%,rgb(224, 152, 111) 100%)',
        'linear-gradient(to right,rgb(4, 232, 240) 0%,rgb(81, 161, 157) 100%)',
        'linear-gradient(to right,rgb(4, 47, 240) 0%,rgb(95, 89, 189) 100%)',
        'linear-gradient(to right,rgb(185, 4, 240) 0%,rgb(212, 149, 218) 100%)',
        'linear-gradient(to right,#06f5f5 0%,#55a0a0 100%)'
    ];
    let a=(Math.random()*7).toFixed();
    return list[a];
}

setTimeout(function(){
    alert('点击开始');
},2000)
$(document).click(function(){
    setInterval(function(){
        biu();
    },1000)
})

function bing(targetX,targetY,bgc){
    let item=$('<div></div>');
    item.css({
        left: targetX,
        top: targetY,
        width:'2px',
        height:'2px',
        border: `5px solid #008c8c`,
    })
    item.appendTo(body);
    return item;
}

function biu(){
    if (audio[0].paused) { //判读是否播放  
        audio[0].paused=false;
        audio[0].play(); //没有就播放
    } 
    // 获取颜色
    let bgc=getRandom6();
    // 发射元素
    let shoot=null;
    var arr=getRandom4();
    shoot=new Tail(740,650,arr[0]-30,arr[1]-30);
    let item1=bing(arr[0],arr[1],bgc);
    var redraw = shoot.item[0].offsetHeight;
    let tag=setInterval(() => {
        item1.toggleClass('unshow');
    }, 200);
    shoot.item.css({
        transition:`left ${getRandom2()+1}s linear 0s,top ${getRandom2()+1}s linear 0s,opacity 2.5s 0s`,
        left:shoot.targetX,
        top:shoot.targetY,
        width:'90px',
        opacity:'0',
        background:bgc,
    })
    shoot.item[0].addEventListener('transitionend', function(){
        $(this).remove();
        shoot.item=null;
        item1.remove();
        // item1=null;
        clearInterval(tag);
        boom();
    })


    function boom(){
        // 爆炸列表
        let list=[];
        for(var i=0;i<100;i++){
            list.push(new Tail(arr[0],arr[1]));
        }
        console.log(list);
        for(let i=0;i<100;i++){
            var redraw = list[i].item[0].offsetHeight;
            // 阻止浏览器的重排优化
            list[i].item.css({
                left:list[i].targetX,
                top:list[i].targetY,
                width:'30px',
                opacity:'0',
                background:bgc,
            })
            list[i].item[0].addEventListener('transitionend',function(){
                $(this).remove();
                list[i]=null;
            })
            setTimeout(function(){
                list=null;
            },3000)
        }
    }
}
